@extends('layouts.auth')

@section('title', '绑定微信账号')

@section('auth-title', '绑定微信账号')

@section('auth-content')
<!-- 微信用户信息展示 -->
<div class="wechat-user-info">
    <div class="wechat-avatar">
        <img id="wechat-avatar" src="{{ session('wechat_temp_user_info.avatar') }}" alt="微信头像">
    </div>
    <div class="wechat-nickname" id="wechat-nickname">{{ session('wechat_temp_user_info.nickname') }}</div>
    <div class="bind-tip">检测到您还未绑定记账助手账号</div>
</div>

<!-- 绑定选项 -->
<div class="bind-options">
    <div class="bind-option">
        <h3>已有账号？</h3>
        <p>登录现有账号即可自动绑定微信</p>
        <a href="{{ route('wechat.login.bind') }}" class="btn btn-primary">登录并绑定</a>
    </div>

    <div class="divider-text">或</div>

    <div class="bind-option">
        <h3>还没有账号？</h3>
        <p>注册新账号后自动绑定微信</p>
        <a href="{{ route('wechat.register.bind') }}" class="btn btn-success">注册并绑定</a>
    </div>
</div>
@endsection

@section('auth-footer')
<a href="{{ route('login') }}" class="auth-link">返回登录页面</a>
@endsection

@push('styles')
<style>
    .wechat-user-info {
        text-align: center;
        margin-bottom: 40px;
        padding: 30px 20px;
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }

    .wechat-avatar {
        width: 80px;
        height: 80px;
        margin: 0 auto 15px;
        border-radius: 50%;
        overflow: hidden;
        border: 3px solid #07C160;
    }

    .wechat-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .wechat-nickname {
        font-size: 20px;
        font-weight: 600;
        color: #2d3748;
        margin-bottom: 10px;
    }

    .bind-tip {
        font-size: 14px;
        color: #718096;
    }

    .bind-options {
        width: 100%;
    }

    .bind-option {
        background: white;
        border-radius: 16px;
        padding: 25px 20px;
        margin-bottom: 20px;
        text-align: center;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }

    .bind-option h3 {
        font-size: 18px;
        font-weight: 600;
        color: #2d3748;
        margin-bottom: 10px;
    }

    .bind-option p {
        font-size: 14px;
        color: #718096;
        margin-bottom: 20px;
    }
</style>
@endpush
